<script>
export default {
  data() {
    return {
      loading: false,
      pageIndex: 1,  //当前页码
      pageSize: 5,   //每页条数
      totalNum: 0,   //总数量
      autoHide: false,  //当只有一页数据时是否隐藏分页
      search: {
        name: ''
      },
      tableData: [],    //数据
      multipleSelection: [],  //选中的数据

      form: {
        userID: 0,
        name: '',
        sex: '男',
        phone: ''
      },
      dialogAddVisible: false,
      dialogEditVisible: false,
    }
  },
  methods: {
    //获取数据
    getUsers() {
      this.loading = true;
      this.axios({
        method: 'get',
        url: 'http://localhost:52481/api/users',
        params: { page: this.pageIndex, size: this.pageSize, name: this.search.name },
        data: {}
      }).then(response => {
        //console.log('response: ', response);
        this.tableData = response.data;
        this.totalNum = response.count;

        setTimeout(() => {
          this.loading = false;
        }, 200);

      })
    }
    //复选框选中
    , handleSelectionChange(val) {
      this.multipleSelection = val;
    }
    //删除
    , del(id) {
      console.log('id: ', id);

      //axios  删除
      this.$message({
        type: 'success',
        message: '删除成功!'
      });


    }
    // 批量删除
    , batchDel() {
      if (this.multipleSelection.length > 0) {
        let ids = this.multipleSelection.reduce((p, v) => p + v.userID + ',', '');
        ids = ids.substr(0, ids.length - 1);

        let names = this.multipleSelection.reduce((p, v) => p + v.name + ',', '');
        names = names.substr(0, names.length - 1);

        this.$confirm('此操作将永久删除【' + names + '】信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          //axios  删除
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });



      }
      else
        this.$message({ type: 'warning', message: '请选择需要删除的用户信息！' })
    }
    //分页
    , handleCurrentChange(val) {
      this.pageIndex = val;
      this.getUsers();
    }
    //切换每页数量
    , handleSizeChange(val) {
      this.pageSize = val;
      this.getUsers();
    }

    //添加弹窗
    , add() {
      this.dialogAddVisible = true;
    }
    //添加保存
    , addSave() {
      //
      let user = JSON.parse(JSON.stringify(this.form));
      console.log('user: ', user);
      //axios

      this.dialogAddVisible = false; //关闭弹窗
      this.getUsers(); //刷新页面
      this.$message({
        type: 'success',
        message: '添加成功！'
      })
    },
    // 
    addClose() {
      //this.$message('弹窗关闭');
    }

    //修改弹窗
    , edit(val) {
      this.form = val;
      this.dialogEditVisible = true;
    }
    //修改保存
    , editSave() {
      //
      let user = JSON.parse(JSON.stringify(this.form));
      console.log('user: ', user);
      //axios

      this.dialogEditVisible = false; //关闭弹窗
      this.getUsers(); //刷新页面
      this.$message({
        type: 'success',
        message: '修改成功！'
      })
    },

  },
  created() {
    this.getUsers();
  }
}
</script>

<template>
  <div>
    <!-- 表单搜索操作栏 -->
    <el-form :inline="true" :model="search" class="demo-form-inline"
      size="mini">
      <el-form-item>
        <el-button type="success" @click="add">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="batchDel">修改</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="batchDel">批量删除</el-button>
      </el-form-item>

      <el-form-item>
        <el-input v-model="search.name" placeholder="姓名"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getUsers">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格数据 -->
    <el-table ref="multipleTable" :data="tableData" v-loading="loading"
      tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55">
      </el-table-column>

      <el-table-column prop="userID" label="编号">
      </el-table-column>

      <el-table-column prop="name" label="姓名">
      </el-table-column>

      <el-table-column prop="sex" label="性别">
      </el-table-column>

      <el-table-column prop="roleName" label="角色">
      </el-table-column>

      <el-table-column prop="phone" label="手机" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="日期" width="120">
        <template #default="scope">{{ scope.row.lastTime}}</template>
      </el-table-column>

      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <!-- 删除气泡提示 -->
          <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了'
            icon="el-icon-info" icon-color="red"
            :title="'确定删除【'+row.name+'】的信息吗？'" @confirm="del(row.userID)"
            @cancel="$message('已取消删除')">
            <template #reference>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-popconfirm>

          <el-button type="warning" size="mini"
            @click="edit(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- 分页 -->
    <el-pagination @current-change="handleCurrentChange"
      @size-change="handleSizeChange" :hide-on-single-page="autoHide"
      :page-sizes="[5, 10, 20,,50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="totalNum"
      background>
      :pager-count="7">
    </el-pagination>

    <!-- 添加的弹窗 -->
    <el-dialog title="添加用户信息" :visible.sync="dialogAddVisible" width="30%"
      @close="addClose">

      <el-form ref="form" :model="form" label-width="60px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.roleID" placeholder="请选择角色">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="主治医师" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date"
            style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status"></el-switch>
        </el-form-item>
        <el-form-item label="性质">
          <el-checkbox-group>
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click=" dialogAddVisible= false">取消</el-button>
        <el-button type="primary" @click="addSave">保存</el-button>
      </span>
    </el-dialog>

    <!-- 修改的弹窗 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogEditVisible" width="30%">

      <el-form ref="form" :model="form" label-width="60px">
        <input v-model="form.userID" type="hidden" />
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.roleID" placeholder="请选择角色">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="主治医师" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date"
            style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status"></el-switch>
        </el-form-item>
        <el-form-item label="性质">
          <el-checkbox-group>
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click=" dialogEditVisible= false">取消</el-button>
        <el-button type="primary" @click="editSave">保存</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<style>
</style>